<!DOCTYPE html>
<!-- 	1.按钮和DIV的单击事件（三种绑定方式）
	2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
	3.登入页面
	用户名输入框，
	密码输入框，
	提交按钮
	
	任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
	         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
	         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
	         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
	         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
	              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
	4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<button type="button" onclick="aa()">按钮</button>
		<div id="div1" style="width: 300px;height: 300px;border: 1px solid blue;"  onclick="bb()" onmouseenter="cc()" onmouseleave="dd()" onmousemove="ee()">
		</div>
		<form action="" method="post">
			用户名:<input type="text"  id="username" value="" onfocus="ff()" onblur="gg()" /></br>
			密码:<input type="password"  id="userpwd" value="" onfocus="hh()" onblur="ii()" /></br>
			<button type="button" onclick="jj()">提交</button>
		</form>

				<button type="button" id="btnHello">打印</button>
				<button type="button" onclick="MM();">添加监听器</button>
				<button type="button"  onclick="NN();">移除监听器</button>
	</body>
		<script type="text/javascript">
			function aa(){
				console.log('加一')
			}
			function bb(){
				console.log('单机div')
			}
			function cc(){
				console.log('进入')
				document.getElementById('div1').style.backgroundColor='aqua';
			}
			function dd(){
				console.log('离开')
				document.getElementById('div1').style.backgroundColor='blue'
			}
			function ee(){
				console.log('移动')
			}
			function ff(){
				console.log('输入用户名')

			
			}
			function gg(){
				
				if(username.value ==''){
					alert('请输入用户名');
					
					}
			}
			function hh(){
				console.log('用户在输入密码')
			}
			function ii(){
				
				if(userpwd.value ==''){
					alert('请输入密码');
					
				}
			}
			function jj(){
				
			
				if(username.value.length =='' && userpwd.value.length ==''){
					alert('用户名和密码为空');
					return;
				}
				if(userpwd.value.length=='' ){
					alert('密码为空');
					return;
				}
				if(  username.value.length==''){
					alert('用户名为空');
					return;
				}
				}
						function LL(){
							console.log('实现')
						}
						function MM(){

							document.getElementById('btnHello').addEventListener('click',LL)
	
						}
						function NN(){

							document.getElementById('btnHello').removeEventListener('click',LL)

						}
		</script>
</html>
